<template>
  <div class="primission-container">
    <el-card>
      <!-- 添加菜单按钮 -->
      <el-row>
        <el-col>
          <el-button type="primary" size="small" @click="openAdd(1, '0')"
            ><i class="el-icon-edit"></i> 添加菜单</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="primissionList" row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="row.type === 1"
              @click="openAdd(2, row.id)"
              >添加权限点</el-button
            >
            <el-button type="text">查看api权限</el-button>
            <el-button type="text" @click="openDialog(row.id)">查看</el-button>
            <el-button type="text" @click="deleteClick(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑 & 新增 面板 -->
    <panel
      ref="mypanel"
      :showDialog.sync="showDialog"
      :updateData="updateData"
    ></panel>
  </div>
</template>

<script>
import { getPrimissionAll, delPrimission } from '@/api/primission'
export default {
  name: 'permission',
  data () {
    return {
      // 权限列表
      primissionList: [],
      showDialog: false // 控制 编辑 & 新增 面板的显示与隐藏
    }
  },
  methods: {
    // 获取全部权限点方法
    async getPrimissionList () {
      let res = await getPrimissionAll()
      console.log(res)
      this.primissionList = this.turnData(res.data.data, '0')
    },
    // 将获得数据转换为树状结构
    turnData (arr, pid) {
      let newArr = []
      arr.forEach(item => {
        if (item.pid == pid) {
          let children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    },
    // 删除权限点
    async deleteClick (id) {
      try {
        // 询问用户是否删除
        await this.$confirm('是否删除数据', '警告')
        // 提交数据
        await delPrimission(id)
        // 提示成功
        this.$message.success('删除成功')
        // 更新数据
        this.getPrimissionList()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击查看
    openDialog (id) {
      this.$refs.mypanel.getPrimissionInfo(id)
      this.showDialog = true
    },
    // 新增或修改后更新数据
    updateData () {
      this.getPrimissionList()
    },
    // 新增菜单 & 新增权限点
    openAdd (type, pid) {
      this.$refs.mypanel.setprop(type, pid)
      this.showDialog = true
    }
  },
  created () {
    // 调用获取全部权限点方法
    this.getPrimissionList()
  },
  components: {
    panel: () => import('./components/panel.vue')
  }
}
</script>

<style lang="scss">
.primission-container {
  margin: 20px;

  .el-col {
    text-align: right;
  }

  .el-table {
    margin-top: 15px;
  }
}
</style>
